import React from 'react'
import { Routes, Route } from 'react-router-dom'
import { Toaster } from 'sonner'
import Layout from './components/Layout'
import Home from './pages/Home'
import Login from './pages/Login'
import Register from './pages/Register'
import Books from './pages/Books'
import BookDetail from './pages/BookDetail'
import Activities from './pages/Activities'
import Reading from './pages/Reading'
import Profile from './pages/Profile'
import Cart from './pages/Cart'
import './index.css'

function App() {
  return (
    <div className="min-h-screen bg-cream-50">
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="books" element={<Books />} />
          <Route path="books/:id" element={<BookDetail />} />
          <Route path="activities" element={<Activities />} />
          <Route path="reading" element={<Reading />} />
          <Route path="profile" element={<Profile />} />
          <Route path="cart" element={<Cart />} />
        </Route>
      </Routes>
      <Toaster 
        position="top-center"
        toastOptions={{
          style: {
            background: '#fef7f0',
            border: '2px solid #f97316',
            borderRadius: '1rem',
            color: '#7c2d12',
          },
        }}
      />
    </div>
  )
}

export default App